.map_chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    height: 600px;
    width: 100%;
}
.mainCenter {
    height: 100%;
    .map {
      position: relative;
      height: 100%;
   
      .map1,
      .map2,
      .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 550px;
        background: url(@/assets/images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
      }
      .map2 {
        width: 650px;
        height: 650px;
        background-image: url(@/assets/images/lbx.png);
        opacity: 0.6;
        animation: rotate 15s linear infinite;
        z-index: 2;
      }
      .map3 {
        width: 600px;
        height: 600px;
        position: absolute;
        background-image: url(@/assets/images/jt.png);
        animation: rotate1 10s linear infinite;
      }
  
      @keyframes rotate {
        from {
          transform: translate(-50%,-50%) rotate(0deg);
        }
        to {
          transform: translate(-50%,-50%) rotate(360deg);
        }
      }
      @keyframes rotate1 {
        from {
          transform: translate(-50%,-50%) rotate(0deg);
        }
        to {
          transform: translate(-50%,-50%) rotate(-360deg);
        }
      }
    }
  
  }